<template>
	<view class="code-input">
		<u-navbar  title="短信验证码验证"  :border-bottom="false"  >
		</u-navbar>
		<view class="code-input__count-text">短信已发送至+{{state.code}} {{getSafeText(phone)}}</view>
		<u-message-input  :maxlength="codelength"
		 v-model="code" mode="bottomLine"
		 @finish="checkCode"></u-message-input>
		<view v-if="canClick" class="code-input__resend" @click="resend">重新发送</view>
		<view v-else class="code-input__count-text">{{content}}</view>
	</view>
</template>

<script>
	import  axios from "axios";
	import store from './store.js'
	export default {
		data() {
			return {
				state:store.state,
				canClick:false,
				content:"",
				totalTime:60,
				code:"",
				phone:"",
				codelength:6
			}
		},
		mounted(){
			this.phone=this.state.resetPhone
			this.content = this.totalTime + 's后重新发送'
			let clock = window.setInterval(() => {
				this.totalTime--
				this.content = this.totalTime + 's后重新发送'
				if (this.totalTime < 0) {
				window.clearInterval(clock)
				this.content = '重新发送验证码'
				this.totalTime = 60
				this.canClick = true  
			 }
			},1000)
		},
		methods: {
			getSafeText(phone){
				return phone.substring(0,3)+"****"+phone.substring(phone.length-4)
			},
			resend() {
				let phoneCodeData={
					"phone":this.phone,
					"type":4
				}
				if (!this.canClick) return
				this.canClick = false
				axios({
					method:"get",
					url:getApp().$store.state.baseURL+"/user/phonecode",
					params:phoneCodeData,
				}).then((response)=>{
					console.log("response",response)
					if(response.data.state=="SUCCESS"){
						uni.showToast({
							title: '验证码发送成功',
							icon:'none',
							duration: 2000
						});
						
						this.content = this.totalTime + 's后重新发送'
						let clock = window.setInterval(() => {
							this.totalTime--
							this.content = this.totalTime + 's后重新发送'
							if (this.totalTime < 0) {
							window.clearInterval(clock)
							this.content = '重新发送验证码'
							this.totalTime = 10
							this.canClick = true  
						 }
						},1000)
					}else{
						uni.showToast({
							title: '验证码发送失败',
							icon:'none',
							duration: 2000
						});
					}
				})
			},
			checkCode(code){
				let phoneEditData={
					phone:this.phone,
					code:code
				}
				this.$Axios({
					method:"post",
					url:this.$store.state.baseURL+"/user/phone/edit",
					params:phoneEditData,
				}).then(response=>{
					if(response.data.state=="Success"){
						uni.showToast({
							title:"手机号绑定成功",
							icon:"none",
							duration:2000
						})
						this.$store.state.userInfo.phone=this.phone
					}else{
						uni.showToast({
							title:response.data.msg,
							icon:"none",
							duration:2000
						})
					}
				})
				
			}
		}
	}
</script>

<style lang="less">
.code-input{
	display: flex;
	flex-direction: column;
	align-items:center;
	margin-top: @uni-spacing-row-lg;
	&__title{
		font-size: x-large;
	}
	&__count-text{
		margin-top: @uni-spacing-row-lg;
		margin-bottom: @uni-spacing-row-lg;
		color: @font-color-grey;
	}
	&__resend{
		margin-top: @uni-spacing-row-lg;
		margin-top: @uni-spacing-row-lg;
		margin-bottom: @uni-spacing-row-lg;
		color: @font-color-blue;
	}
}
</style>
